<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小知识分类</title>
    <link rel="stylesheet" href="css/pet.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/header.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/cyclopedia.css" media="screen" title="no title">
    <link rel="stylesheet" href="css/footer.css" media="screen" title="no title">
</head>
<body>
  <div class="header">
      <div class="head">
          <ul class="firstHead">
              <li><a href="index.html" target="_blank">波奇首页</a></li>
              <li><a href="shop.html" target="_blank">波奇商城</a></li>
              <li><a href="serve.html" target="_blank">波奇服务</a></li>
              <li><a href="message.html" target="_blank">波奇论坛</a></li>
              <li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
          </ul>
          <ul class="attention">
              <li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
          </ul>
          <ul class="register">
              <li><a href="login.html" target="_blank">登陆</a></li>
              <li><a href="script:;">|</a></li>
              <li><a href="register.html" target="_blank">免费注册</a></li>
          </ul>
          <ul class="userLogin">
              <li>
                  <a href="script:;" id="userName"></a>
              </li>
              <li>|</li>
              <li><a href="script:;" id="quit">退出</a></li>
          </ul>

      </div>
  </div>
    <div class="navigation">
        <div class="logo">
            <img src="source/images/logo_baike.gif" alt="" />
        </div>
        <div class="serch">
            <input id="keyword" type="text" name="name" value="" placeholder="请输入关键字">
            <img id="search" src="source/images/ind_sch.png" alt="" />
        </div>
        <div class="app">
            <a href="#"><img src="source/images/app.jpeg" alt="" /></a>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li><a href="cyclopedia.html">首页</a></li>
            <li><a href="#dog">狗狗</a></li>
            <li><a href="#cat">猫咪</a></li>
            <li><a href="#other">其它</a></li>
            <!-- <li><a href="#">水族</a></li>
            <li><a href="#">爬虫</a></li> -->
        </ul>
    </div>
    <div class="content">
        <div class="content_top">
            <span><a href="cyclopedia.html">首页</a></span><em>></em><span id="kind"></span>
        </div>
        <div class="content_auto">
            <div class="content_auto_left">
                <div class="left_top">
                    <div class="title">
                        <img src="source/images/img/dog_head.png" alt="" />
                        <span>狗狗</span>
                    </div>

                </div>
                <ul class="left_auto">

                </ul>
            </div>
            <div class="content_auto_right" id="dog">
                <div class="title_r">
                    <span>热门狗狗</span>
                </div>
                <div class="zhanshi">
                    <!-- <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a> -->
                </div>
            </div>
        </div>
        <div class="content_auto" id="cat">
            <div class="content_auto_left">
                <div class="left_top">
                    <div class="title">
                        <img src="source/images/img/cat_head.png" alt="" />
                        <span>猫咪</span>
                    </div>

                </div>
                <ul class="left_auto">

                </ul>
            </div>
            <div class="content_auto_right">
                <div class="title_r">
                    <span>热门狗狗</span>
                </div>
                <div class="zhanshi">
                    <!-- <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a> -->
                </div>
            </div>
        </div>
        <div class="content_auto" id="other">
            <div class="content_auto_left">
                <div class="left_top">
                    <div class="title">
                        <img src="source/images/img/37.png" alt="" />
                        <span>其它</span>
                    </div>

                </div>
                <ul class="left_auto">

                </ul>
            </div>
            <div class="content_auto_right">
                <div class="title_r">
                    <span>热门狗狗</span>
                </div>
                <div class="zhanshi">
                    <!-- <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a>
                    <a href="#">
                        <dl><dt><img src="source/images/img2/1-1.png" alt="" /></dt>
                            <dd>金毛犬</dd>
                        </dl>
                    </a> -->
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a></li>|
            <li><a href="#">友情链接</a></li>|
            <li><a href="#">诚聘英才</a></li>|
            <li><a href="#">联系我们</a></li>|
            <li><a href="#">网站地图</a></li>|
            <li><a href="#">意见反馈</a></li>|
            <li><a href="#">帮助中心</a></li>|
            <li><a href="#">客服热线：123456789</a></li>
        </ul>
        <p>
            Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
        </p>
        <p class="href">
            <a href="http://www.sgs.gov.cn/"><img src="source/images/foot_gs.png" alt="" /></a>
            <a href="#"><img src="source/images/foot_cx.png" alt="" /></a>
            <a href="#"><img src="source/images/foot_kx.png" alt="" /></a>
            <a href="#"><img src="source/images/foot_zx.png" alt="" /></a>
        </p>
    </div>
</body>

</html>
<script type="text/javascript">

var register = document.getElementsByClassName("register")[0];
var userLogin =document.getElementsByClassName("userLogin")[0];
var userName = document.getElementById("userName");
var quit = document.getElementById("quit");
window.ready = readStorage();
setInterval(readStorage,2000);
//读取storage的数据
function readStorage(){
  var storage = window.localStorage;
  if (typeof(storage["user"])=='undefined') {
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else if(storage["user"]==""){
    register.style.display ="inline-block";
    userLogin.style.display = "none";
     return false;
  }else {
    var myDate =  new Date();
    var currenTime = myDate.getTime();
    if (currenTime >= Number(storage["userTime"])+3600000) {
      storage["user"] =="";
    }else {
        register.style.display ="none";
        userLogin.style.display = "inline-block";
        userName.innerText = storage["user"];
    }

  }
}
quit.onclick = function (){
  var storage = window.localStorage;
  register.style.display ="inline-block";
  userLogin.style.display = "none";
  storage["user"] = "";
}


var kind2=window.location.search.slice(window.location.search.indexOf("?")+1);
var kind = document.getElementById("kind");
console.log(kind2);
switch (kind2) {
  case '1':
    kind.innerText = "宠物饲养";
    break;
  case '2':
    kind.innerText = "宠物训练";
    break;
  case '3':
    kind.innerText = "宠物医疗";
    break;
}
var XMLHttp
if (window.ActiveXObject) {
  XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
}else{
  XMLHttp = new XMLHttpRequest();
}
var j =  0;
var k =1;
var url = "php/pet.php?kind2="+kind2+"&kind1="+(j+1);
  console.log(url);
XMLHttp.open('get',url,true);
XMLHttp.send(null);
XMLHttp.onreadystatechange = function () {
  if (XMLHttp.readyState == 4) {
    if (XMLHttp.status == 200) {
      obj = JSON.parse(XMLHttp.response);
      if (j<3) {
        for (var i = 0; i < obj.length; i++) {
          objbody = JSON.parse(obj[i]);
          var left_auto = document.getElementsByClassName("left_auto")
          var li = document.createElement("li");
          li.innerHTML = '<em><img src="source/images/em.png" alt="" /></em><span><a href="article.html?'+objbody.title+'">'+objbody.title+'</a></span><span>2016-11-04 10:22</span>'
          left_auto[j].appendChild(li);
        }
        j++;
      }else {
        for (var i = 0; i < 4; i++) {
          objbody = JSON.parse(obj[i]);
          var a = document.createElement("a");
          var zhanshi = document.getElementsByClassName("zhanshi");
          a.href = "animalShow.html?"+objbody.name;
          a.innerHTML = '<dl><dt><img src="'+objbody.imgurl1+'" alt="" /></dt><dd>'+objbody.name+'</dd></dl>';
          zhanshi[k-1].appendChild(a);
        }
        k++;
      }
      if (j<3) {
        var url = "php/pet.php?kind2="+kind2+"&kind1="+(j+1);
        console.log(url);
        XMLHttp.open('get',url,true);
        XMLHttp.send(null);
      }else{
        if (k<4) {
          var url = "php/animalkind.php?kind="+k;
          console.log(url);
          XMLHttp.open('get',url,true);
          XMLHttp.send(null);
        }
      }
    }
  }
}

var keyword = document.getElementById("keyword");
var search = document.getElementById("search");
search.onclick = function () {
  if (!keyword.value) {
    keyword.focus();
  }else{
    window.open('wares.html?'+keyword.value);
  }
}
</script>
